import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let defaultCity = '上海'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}

export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  actions: {
    changeCity (context, city) {
      context.commit('changeCity2', city)
    }
  },
  /* 上面代码,等价于
  changeCity ({commit}, city) { // 直接将context{}对象的方法commit作为参数传递出来
    commit('changeCity2', city)
  }
  */
  mutations: {
    changeCity2 (state, city) {
      state.city = city
      try {
        localStorage.city = city
      } catch (e) {}
    }
  }
})

/* 整个流程
1.actions 调用commit()方法,类似于$emit,触发事件
  从而调用mutations

2.而mutations是可以直接操作state的
*/

/* ============================= 2.如果采用模块的方式 ===================
1.
import mutations from './mutations'
import actions from './actions'

const store = new Vuex.Store({
  modules:{
    mutations,
    actions,
  }
})

export default store;

-------------------------或者----------我比较推荐这个
2.
export default new Vuex.Store({
    modules:{
      mutations,
      actions,
    }
})

--------------------------或者
3.
vuex这里进行了升级,  引入模块的概念
const moduleA = {
  state,mutations,getters
}

export default new Vuex.Store({
  modules:{moduleA},
})

===============================================
4.
然后在count.vue中引入
<h3>{{$store.state.moduleA.count}}</h3>==============state.moduleA.count;模块名字在前面

$store.state代表的是全局变量$store
this.$store.state代表的是vm实例中的$store 二者是等价继承的关系,使用起来没差别

-----------------------------------------------
5.
在Vuex中是通过map...集中管理方法 和数据的, 所以触发也交给它
methods:{
  ...mapMutations(['incrementCount','decrementCount']),
  ...mapActions(['triggerIncrement','triggerDecrement']),
}
*/
